<template>
  <div class="about">
    <!-- 收货地址功能 -->
    <el-dialog
      title="收货地址"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-button
        type="success"
        @click="(createaddress = true), (tableShow = false)"
        >新增</el-button
      >
      <el-button type="danger" @click="dropaddress()">删除</el-button>
      <!-- 收货地址展示表单 -->
      <div class="orderShoppingList" style="margin-top: 25px">
        <el-descriptions
          class="margin-top"
          :column="3"
          size = "medium"
          
          border
          v-for="(item, id) in shopingaddress"
          :key="id"
        >
        <!-- direction="vertical" -->
          <el-descriptions-item>
            <template slot="label">
              <label>
                 <el-radio v-model="receiptid" :label="item.id"></el-radio>
              <i class="el-icon-user"></i>
              姓名
              </label>
            </template>
            {{ item.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ item.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              收货地址
            </template>
            {{ item.address }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 添加收货地址表单 -->
      <div v-if="createaddress" style="margin-top: 25px">
        <el-form
          :model="addressList"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="addressList.username"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="addressList.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="addressList.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="addressList.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="qraddress('ruleForm')"
              >添加</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>

    <!-- 购物车页面 -->
    <div class="cart-header">
      <div class="cart-header-warp clearfix">
        <div class="cart-title left clearfix">
          <h1 class="left">我的购物车</h1>
        </div>
      </div>
    </div>
    <div class="cart-body">
      <div class="cart-body-title">
        <div class="item-1">
          <el-checkbox>全选</el-checkbox>
        </div>
        <div class="newitem-2">
          <span class="c-4d555d l">商品</span>
        </div>
        <div class="newitem-3">
          <span class="c-4d555d 1">数量</span>
        </div>
      </div>

      <div class="js-item-cart" v-for="(item, id) in shopnum" :key="id">
        <div class="item-1">
          <input
            type="checkbox"
            @click="Selected(item - 1, $event)"
            :id="shops[item - 1]"
          />
        </div>
        <div class="item-2">
          <div class="item-2-list">
            <div class="item-img">
              <img
                :src="minphotos[item - 1]"
                alt=""
                style="object-fit: cover"
              />
              <!-- <el-image style="width: 120px; height: 120px" :src="minphotos[item - 1]" /> -->
            </div>
            <div class="item-detail">
              <a href="" class="item-title">{{ shopnames[item - 1] }}</a>
              <p class="item-desc">{{ shopdescs[item - 1] }}</p>
              <div class="item-classify">
                <span>价格:{{ shops[item - 1] }}</span>
              </div>
            </div>
          </div>
          {{shoppMaxNum[item - 1]}}
          <div class="item-number" style="margin-left;: 0">
            <el-input-number
              v-model="usershopnum[id]"
              @change="handleChange(id)"
              :min="1"
              :max="shoppMaxNum[item - 1]"
              label="描述文字"
            ></el-input-number>
          </div>
        </div>
      </div>

      <div class="add-coupon-box">
        <div class="coupon-box-son">
          <div class="li-left">
            <span class="topdiv w70">总计金额：</span>
            <span class="price price-red w100 clearfix">
              <em>￥</em>
              <span class="jsAltogether">{{ prices }}</span>
            </span>
          </div>
          <div class="li-right">
            <span class="btnconfrim" @click="test()"> 去结算 </span>
            <span class="btnconfrim" @click="deleteshop()"> 删除 </span>
            <!-- tableShow = true ;  -->
            <span
              class="btnconfrim"
              @click="
                tableShow = true;
                dialogVisible = true;
              "
              >收货地址</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 收货地址 -->
    <!-- <div class="shop-address" v-if="tableShow"> -->
    <!--  <el-descriptions
        class="margin-top"
        :column="3"
        border
        v-for="(item, id) in shopingaddress"
        :key="id"
      >
        <el-descriptions-item>
          <template slot="label">
            <el-radio v-model="receiptid" :label="item.id"></el-radio>
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ item.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ item.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            收货地址
          </template>
          {{ item.address }}
        </el-descriptions-item>
      </el-descriptions> -->

    <!-- 点击收货地址弹出 -->
    <!-- <div style="margin-left: 69%; margin-top: 1rem">
        <el-button
          type="success"
          @click="(createaddress = true), (tableShow = false)"
          >新增</el-button
        >
        <el-button type="danger" @click="dropaddress()">删除</el-button>
        <el-button type="danger" @click="tableShow = false">关闭</el-button>
      </div> -->
    <!-- </div> -->

    <!-- 新增收货地址 -->
    <!-- <div v-if="createaddress" class="New-Receipt">
      姓名:<input type="text" v-model="caddress.username" /><br />
      性别:<el-radio v-model="caddress.sex" label="1">男</el-radio>
      <el-radio v-model="caddress.sex" label="0">女</el-radio><br />
      手机:<input type="text" v-model="caddress.phone" /><br />
      地址:<el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="caddress.address"
      >
      </el-input>
      <el-button type="success" @click="qraddress()">确认</el-button>
      <el-button type="danger" @click="createaddress = false">关闭</el-button>
    </div> -->
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      //收货地址弹出框
      dialogVisible: false,
      //控制收货地址展示
      tableShow: false,
      //收货地址
      shopingaddress: [],
      //收货地址id
      receiptid: "",
      //新增收货地址
      addressList: {
        address: "",
        fkUserUserid: this.$store.state.userid,
        phone: "",
        sex: "1",
        username: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入收件人名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入收件人手机号", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入收件地址", trigger: "blur" },
        ],
      },
      //基本数据
      shopnum: "",
      shops: [],
      shopnames: [],
      minphotos: [],
      shopdescs: [],
      shoppMaxNum: [],
      checked: "",
      prices: 0,
      usershopnum: [],
      //选中删除
      droparr: [],
      //控制新增地址页面展示
      createaddress: false,
      //新增收货地址
      caddress: {
        address: "",
        fkUserUserid: this.$store.state.userid,
        phone: "",
        sex: "1",
        username: "",
      },
    };
  },
  mounted() {
    this.start();
    this.usershopnum = this.$store.state.usershopnum;
    this.shopaddress();
    console.log(this.caddress);
  },
  methods: {
    //关闭收货地址弹出框
    handleClose() {
      this.$confirm("确认关闭？").then(() => {
        this.dialogVisible = false;
        this.$refs.ruleForm.resetFields();
      });
    },
    //重置收货地址表单
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    Selected(value, e) {
      if (e.target.checked == true) {
        this.prices +=
          this.$store.state.usershopprice[value] *
          this.$store.state.usershopnum[value];
        this.droparr.push(value);
      } else {
        this.prices -=
          this.$store.state.usershopprice[value] *
          this.$store.state.usershopnum[value];
        this.droparr.forEach(function (item, index, arr) {
          if (item === value) {
            arr.splice(index, 1);
          }
        });
      }
    },
    test() {
      if (this.$store.state.userpurchase == "") {
        this.$message({
          message: "请添加商品",
          type: "warning",
        });
        return;
      }
      if(this.receiptid == ""){
        this.$message({
          message: "请选择收货地址",
          type: "warning",
        });
        return;
      }
      var arr = new Array();
      for (var i = 0; i < this.$store.state.usershopnum.length; i++) {
        var p = {};
        p.number = this.$store.state.usershopnum[i] - 0;
        p.orderReceivingnote = this.receiptid;
        p.payMethod = "支付宝";
        p.shopid = this.$store.state.userpurchase[i] - 0;
        p.userid = this.$store.state.userid;
        p.merchantid = this.$store.state.mecharId[i] - 0;
        // p.merchantid = 
        arr.push(p);
      }
      console.log(arr);
      this.$axios
        .post("/tOrder/saveOrderInfo", arr, {
          headers: {
            "Content-type": "application/json",
          },
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: "购买成功!",
            type: "success",
            // onClose:()=>{
            //   this.
            // }
          });
          this.$store.state.userpurchase = [];
          this.$store.state.usershopnum = [];
          this.$store.state.usershopprice = [];
          this.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //数量发生改变
    handleChange(index) {
      console.log(this.usershopnum[index]);
      this.$store.state.usershopnum[index] = this.usershopnum[index];
    },
    //删除商品
    deleteshop() {
      if (this.$store.state.userpurchase == "") {
        this.$message({
          message: "请添加商品",
          type: "warning",
        });
        return;
      }
      if (confirm("是否删除选中商品") == true) {
        for (var i = 0; i < this.droparr.length; i++) {
          this.prices -=
            this.$store.state.usershopprice[i] *
            this.$store.state.usershopnum[i];
          this.$store.state.usershopnum.splice(this.droparr[i], 1);
          this.$store.state.userpurchase.splice(this.droparr[i], 1);
          this.$store.state.usershopprice.splice(this.droparr[i], 1);
        }
        this.reload();
      }
    },
    async start() {
      this.shopnum = "";
      this.shops = [];
      this.shopnames = [];
      this.minphotos = [];
      this.shopdescs = [];
      this.shopnum = this.$store.state.usershopnum.length;
      console.log(this.$store.state.userpurchase);
      for (var j = 0; j < this.$store.state.userpurchase.length; j++) {
        console.log(j);
        let shopid = this.$store.state.userpurchase[j];
        await this.$axios
          .get("/tShop/searchByidAndstate", {
            params: {
              shopid: this.$store.state.userpurchase[j],
            },
          })
          .then((res) => {
            console.log(res.data.data[0].price);
            console.log(res.data.data);
            this.shops.push(res.data.data[0].price);
            this.shopnames.push(res.data.data[0].shopname);
            this.minphotos.push(
              "http://114.132.236.89:8888/static/" + res.data.data[0].maxohoto
            );
            this.shopdescs.push(res.data.data[0].desc);
            //获取库存量
            this.$axios
              .get(`/tCash/selectbyshopid?shopid=${shopid}`)
              .then((res) => {
                this.shoppMaxNum.push(res.data.data[0].number);
              });
            console.log(this.minphotos);
            this.$forceUpdate();
          });
      }
      console.log(this.shops);
      console.log(this.minphotos);
      if (this.$store.state.LoginStatus == 0) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        this.$router.push("/");
      }
    },
    //拿到收货地址
    shopaddress() {
      this.$axios
        .get("/tReceivingnote/selectbyuseridaddressinfo", {
          params: {
            userid: this.$store.state.userid,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.shopingaddress = res.data.data;
            // for (var i = 0; i < res.data.data.length; i++) {
            //   this.shopingaddress.push(res.data.data[i]);
            // }
            this.receiptid = res.data.data[0].id;
            console.log(this.receiptid);
          }else{
              this.shopingaddress = [];
          }
        })
    },
    //保存收货地址
    qraddress() {
      let data = this.addressList;
      this.$axios
        .post("/tReceivingnote/saveuseridaddressinfo", data, {
          headers: {
            "Content-type": "application/json",
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            // this.reload();
            this.shopaddress();
            this.createaddress = false;
            this.$refs.ruleForm.resetFields();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除收货地址
    dropaddress() {
      this.$confirm("是否删除").then(() => {
        this.$axios
          .post(`/tReceivingnote/delId?nid=${this.receiptid}`)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                duration: 1200,
                message: "删除成功",
              });
              this.shopaddress();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
};
</script>
<style>
.item-number .el-input-number {
  margin-left: 345px !important;
}
.orderShoppingList .el-descriptions {
  margin-left: 0 !important;
}
.orderShoppingList .el-descriptions td{
  width: 120px !important;
}
.orderShoppingList .el-descriptions td:last-of-type{
  width: 320px !important;
}
.about .el-dialog{
  min-width: 1010px !important;
}
</style>

<style lang="scss" scoped>
.about {
  margin-top: 80px;
  > .cart-header {
    height: 160px;
    background: url("../assets/cart-header-bg.jpg") repeat-x left bottom;
    .cart-header-warp {
      max-width: 1200px;
      height: 120px;
      line-height: 120px;
      margin-left: auto;
      margin-right: auto;
      font-size: 14px;
      h1 {
        font-size: 32px;
        line-height: 115px;
        margin-right: 25px;
        color: #07111b;
        font-weight: 200;
      }
    }
  }
  .newitem-3 {
    padding-left: 70%;
  }
  .el-input-number {
    margin-left: 550px;
    margin-top: 25px;
  }
  > .cart-body {
    max-width: 1200px;
    padding: 0 36px 32px;
    background-color: #fff;
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 8px;
    box-sizing: border-box;
    > .cart-body-title {
      min-height: 88px;
      line-height: 88px;
      border-bottom: 1px solid #b7bbbf;
      box-sizing: border-box;
      display: flex;
      > .item-1 {
        width: 6.25rem;
      }
    }
    > .js-item-cart {
      display: flex;
      height: 88px;
      padding: 24px 0;
      border-bottom: 1px solid #d9dde1;
      > .item-1 {
        padding-top: 32px;
        position: relative;
        z-index: 1;
        width: 4.25rem;
      }
      > .item-2 {
        display: flex;
        flex-wrap: wrap;
        > .item-2-list {
          display: flex;
          width: 400px;
          margin: 0 auto;
          background: #fff;
          box-sizing: border-box;
          position: relative;
          line-height: 1;
          .item-img {
            width: 110px;
            height: 87px;
            // margin-right: 32px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            img {
              width: 100%;
              object-fit: cover;
            }
          }
          .item-detail {
            width: 100%;
            margin-left: 25px;
            overflow: hidden;
            .item-title {
              width: auto;
              font-size: 16px;
              line-height: 32px;
              font-weight: 700;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: inline-block;
              text-decoration: none;
              color: #1c1f21;
            }
            .item-title:hover {
              color: #fe5471;
            }
            .item-desc {
              max-height: 48px;
              overflow: hidden;
              color: #4d555d;
              font-size: 12px;
              line-height: 24px;
            }
            .item-classify {
              margin-top: 8px;
              span {
                line-height: 24px;
                color: #444;
                font-size: 14px;
                padding-right: 24px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
    > .add-coupon-box {
      height: 4.625rem;
      > .coupon-box-son {
        display: flex;
        height: 3.125rem;
        padding-top: 1.5rem;
        line-height: 3.125rem;
        .li-right {
          text-align: right;
          .btnconfrim {
            margin-left: 38px;
            padding: 13px 32px;
            color: #fff;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            font-weight: 200;
            background: #f01414;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
.margin-top {
  width: 60rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}
.shop-address {
  width: 55rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ccc;
}
.New-Receipt {
  margin: 0 auto;
  width: 20rem;
  background-color: #ccc;
  border-radius: 5px;
  button {
    margin-top: 1rem;
  }
}
</style>
